<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script
	src="/resource/bootstrap-treeview/js/bootstrap-treeview.js"></script>
<link
	href="/resource/bootstrap-treeview/css/bootstrap-treeview.css"
	rel="stylesheet">
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<!-- 属性控件显示位置 -->
				<div id="tree"></div>
			</div>
			<div class="col-md-6">
				<!-- 树形菜单的CRUD -->
				<!-- 添加的form -->
				<form id="addForm">
					<div class="form-group row">
						<input type="hidden" name="parentId" id="parentId" value="">
						<label for="parentName" class="col-sm-2 col-form-label">父分类名</label>
						<div class="col-sm-10">
							<input type="text" disabled="disabled" class="form-control"
								id="parentName">
						</div>
					</div>
					<div class="form-group row">
						<label for="catPath" class="col-sm-2 col-form-label">分类路径</label>
						<div class="col-sm-10">
							<input type="text" name="path" class="form-control" id="catPath">
						</div>
					</div>
					<div class="form-group row">
						<label for="catName" class="col-sm-2 col-form-label">分类</label>
						<div class="col-sm-10">
							<input type="text" name="name" class="form-control" id="catName">
						</div>
					</div>
					<button type="button" class="btn btn-primary" onclick="addCat()">添加分类</button>
				</form>



				<hr>
				<!-- 修改和删除的form -->
				<form id="delupdateForm">

					<input type="hidden" id="currentId"  name="id"><!-- ?????????? -->
					<div class="form-group row">
						<label for="currentCatPath" class="col-sm-2 col-form-label">分类路径</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="path"
								id="currentCatPath">
						</div>
					</div>
					<div class="form-group row">
						<label for="currentCatName" class="col-sm-2 col-form-label">分类</label>
						<div class="col-sm-10">
							<input type="text" name="name" class="form-control"
								id="currentCatName">
						</div>
					</div>
					<button type="button" class="btn btn-primary" onclick="updateCat()">修改分类</button>
					<button type="button" id="delButton" class="btn btn-primary"
						onclick="delCat()">删除分类</button>
				</form>
			</div>
		</div>
	</div>
</body>

<script type="text/javascript">

function addCat(){
	$.post("cat/add",$("#addForm").serialize(),function(resp){

			if(resp){
				alert("success")
				initTree();
			}else{
				alert("error!!")
			}
	})
}
function updateCat(){
	$.post("cat/update",$("#delupdateForm").serialize(),function(resp){

		if(resp){
			alert("success")
			initTree();
		}else{
			alert("error!!")
		}
	})
}
function delCat(){
	$.post("cat/del",$("#delupdateForm").serialize(),function(resp){

		if(resp){
			alert("success")
			initTree();
		}else{
			alert("error!!")
		}
	})
}

	/* =============================版本2(循环较多)============================= */
	var treeData = [];
	$(function() {
		$.get("cat/getTree", function(data) {
			treeData = data;
			$.each(treeData, function(index, cat) {
				$("#fu").append('<option value="'+cat.id+'">' + cat.text + '</option>')
			})
		}, "json");

		//注册事件
		$("#fu").change(
				function() {
					$("#zi").empty();
					$("#sun").empty();
					var fid = this.value;
					//$("#zi").append('<option value="0">请选择z</option>')
					//遍历数据
					$.each(treeData, function(index, p) {
						if (fid == p.id) {
							$.each(p.nodes, function(index, cat) {
								$("#zi").append(
										'<option value="'+cat.id+'">'
												+ cat.text + '</option>')
							})
						}

					})
				});

		//注册事件
		$("#zi").change(
				function() {
					$("#sun").empty();
					var zid = this.value;
					console.log(zid + "==================");
					$("#sun").append('<option value="0">请选择sun</option>')
					//遍历数据
					$.each(treeData, function(index, p) {

						$.each(p.nodes, function(index, cat) {
							console.log(zid + "-------" + cat.id);
							if (zid == cat.id) {
								$.each(cat.nodes, function(index, sx) {
									$("#sun").append(
											'<option value="'+sx.id+'">'
													+ sx.text + '</option>')
								})
							}

						})

					})
				});
	});

	

	/* =============================版本1,把category的所有数据查询出来============================= */
	/* var catData = [];
	$(function(){
		$.post("cat/getTree1",{},function(data){
			catData=data;
			$("#fu").empty();
			$.each(data,function(index,cat){
				if(cat.parentId==0){
					$("#fu").append('<option value="'+cat.id+'">'+cat.text+'</option>')
				}
			})
			//$("#fu").val(1)
			fu();
		},'json')
	})
	function fu(){
		$("#zi").empty();
		$.each(catData,function(index,cat){
			if(cat.parentId==$("#fu").val()){
				$("#zi").append('<option value="'+cat.id+'">'+cat.text+'</option>')
			}

		})
		zi();
	}

	function zi(){
		$("#sun").empty();
		$.each(catData,function(index,cat){
			if(cat.parentId==$("#zi").val()){
				$("#sun").append('<option value="'+cat.id+'">'+cat.text+'</option>')
			}

		})
	} */

	initTree();
	function initTree() {
		$.post("cat/getTree", {}, function(data) {
			$('#tree').treeview({
				data : data,
				levels : 5,
				onNodeSelected: function(event, data) {
					console.log(data.text)
					$("#catPath").val(data.path);
					$("#parentName").val(data.text);
					$("#currentCatName").val(data.text);
					$("#currentCatPath").val(data.path);
					$("#parentId").val(data.id);
					$("#currentId").val(data.id);
					if(data.nodes.length==0){
						//可以被删除---亮
						$("#delButton").attr("disabled",false)
					}else{
						//不可以--灰
						$("#delButton").attr("disabled",true)
					}
				}
			});
		})
	}
</script>
</html>